<template>
  <div class="image-waterfall">
    <div class="waterfall-container" ref="waterfallContainer">
      <div
        v-for="(image, index) in images"
        :key="image.id"
        class="image-item"
        :style="{ width: itemWidth + 'px' }"
      >
        <el-card class="image-card" shadow="hover">
          <el-image
            :src="image.url"
            :alt="image.fileName"
            class="image-preview"
            :preview-src-list="images.map(img => img.url)"
            :initial-index="index"
            fit="cover"
            style="width: 100%; height: 200px"
            @click="handlePreview(image)"
          />
          <div class="image-info">
            <div class="image-name" :title="image.fileName">{{ image.fileName }}</div>
            <div class="image-meta">
              <span class="image-size">{{ formatFileSize(image.fileSize) }}</span>
              <span class="image-category">
                <DictDisplay dict-type="image_category" :value="image.category" />
              </span>
            </div>
            <div class="image-actions">
              <el-button type="primary" size="small" @click="handleEdit(image)">
                <el-icon>
                  <Edit />
                </el-icon>
              </el-button>
              <el-button type="success" size="small" @click="handleCopyUrl(image)">
                <el-icon>
                  <CopyDocument />
                </el-icon>
              </el-button>
              <el-button type="danger" size="small" @click="handleDelete(image)">
                <el-icon>
                  <Delete />
                </el-icon>
              </el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { ElMessage, ElMessageBox, ElImage } from "element-plus";
import DictDisplay from "@/components/DictDisplay.vue";
import { Edit, CopyDocument, Delete } from "@element-plus/icons-vue";

const props = defineProps({
  images: {
    type: Array,
    required: true,
  },
});

const emit = defineEmits(["edit", "copyUrl", "delete"]);

const waterfallContainer = ref(null);
const itemWidth = ref(240);

// 格式化文件大小
const formatFileSize = (size) => {
  if (size < 1024) {
    return size + " B";
  } else if (size < 1024 * 1024) {
    return (size / 1024).toFixed(2) + " KB";
  } else if (size < 1024 * 1024 * 1024) {
    return (size / (1024 * 1024)).toFixed(2) + " MB";
  } else {
    return (size / (1024 * 1024 * 1024)).toFixed(2) + " GB";
  }
};

const handleEdit = (image) => {
  emit("edit", image);
};

const handleCopyUrl = (image) => {
  emit("copyUrl", image);
};

const handleDelete = (image) => {
  emit("delete", image);
};

// 由于使用了el-image的preview-src-list功能，不再需要触发preview事件
const handlePreview = (image) => {
  // 空函数，预览功能由el-image组件自动处理
};

// 处理窗口大小变化
const handleResize = () => {
  if (waterfallContainer.value) {
    const containerWidth = waterfallContainer.value.offsetWidth;
    // 计算每行可以放置的图片数量
    const count = Math.floor(containerWidth / (itemWidth.value + 20));
    // 重新计算图片宽度以填满容器
    if (count > 0) {
      itemWidth.value = Math.floor((containerWidth - 20 * (count + 1)) / count);
    }
  }
};

onMounted(() => {
  window.addEventListener("resize", handleResize);
  // 初始化时计算一次
  handleResize();
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});
</script>

<style scoped>
.image-waterfall {
  width: 100%;
}

.waterfall-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px 0;
}

.image-item {
  break-inside: avoid;
  margin-bottom: 20px;
}

.image-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 移除原来的.image-wrapper样式，使用el-image的样式 */

/* 移除原来的image-preview样式，使用el-image的样式 */

.image-info {
  /* padding: 12px; */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.image-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 12px;
  color: #666;
}

.image-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
</style>